<%-- 
    Document   : paginaBienvenida
    Created on : 05-may-2012, 11:15:30
    Author     : nahuel
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Crazy-notes - <s:property value="grupo"/></title>
        <link href="<s:url value="/css/sdpage.css"/>" rel="stylesheet" type="text/css"/>
        <link rel="icon" type="image/png" href="imagenes/logo.png" />
        <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
        <script>
            function Visualizar(Seccion,estado){ 
                Seccion.style.display=estado; 
            }
            
            function tamanio(){ 
                var el = document.getElementById('grupostabla');
                var res =window.innerHeight - 230;
                 
                el.style.height=res.toString()+"px";
                
                el = document.getElementById('grupos_content');
                res =window.innerHeight - 388;
                el.style.height=res.toString()+"px";
              
                var res1 = document.getElementById('content').offsetHeight;
                res = window.innerHeight - 274;
                if(res1 <= res){
                    el = document.getElementById('content');
                    el.style.height=res.toString()+"px";
                }
            } 
            
            function modificar(id,nota,categoria,color){
                document.forms['formularioModificarNota'].elements['id'].value = id;
                document.forms['formularioModificarNota'].elements['descripcion_modificar'].value = nota;
                document.forms['formularioModificarNota'].elements['posicion_modificar'].value = categoria; 
                document.forms['formularioModificarNota'].elements['color_modificar'].value = color; 
            }
            
            $(document).ready(function () {
                // overlay with masking. when overlay is loaded or closed we hide error messages if needed
                $("#form1").overlay({mask: '#000000', fixed: false});
                $(".form2").overlay({mask: '#000000', fixed: false});
                $("#form3").overlay({mask: '#000000', fixed: false});
            });
            
            $(window).resize(function() { 
                var el = document.getElementById('grupostabla');
                var res =window.innerHeight - 230;
         
                el.style.height=res.toString()+"px";   
                
                el = document.getElementById('grupos_content');
                res =window.innerHeight - 388
                el.style.height=res.toString()+"px";
                
                var res1 = document.getElementById('content').offsetHeight;
                res = window.innerHeight - 274;
                if(res1 <= res){
                    el = document.getElementById('content');
                    el.style.height=res.toString()+"px";
                }
            }); 
        </script>
        <script language="JavaScript" type="text/javascript">
            
            var count1 = 0;
            var count2 = 0;
            
            function removeOptionSelected()
            {
                var elSel = document.getElementById('LISTA_USERS');
                var i;
                for (i = elSel.length - 1; i>=0; i--) {
                    if (elSel.options[i].selected) {
                        elSel.remove(i);
                    }
                }
            }
            
            function exist()
            {
                var elSel = document.getElementById('LISTA_USERS');
                var e = document.getElementById('LISTA_USUARIOS');
                for(i=0; i< elSel.options.length; i++) 
                    if(elSel.options[i].text == e.options[e.selectedIndex].text) 
                        return true; 
            }
            
            function selectAll()
            {
                var elSel = document.getElementById('LISTA_USERS');
                for(i=0; i< elSel.options.length; i++) 
                    elSel.options[i].selected = true; 
            }
            
            function appendOptionLast()
            {
                var elOptNew = document.createElement('option');
                var e = document.getElementById('LISTA1');
                elOptNew.text = e.options[e.selectedIndex].text;
                elOptNew.value = e.options[e.selectedIndex].text;
                var elSel = document.getElementById('LISTA_USERS');
                if(exist())
                    alert("Usuario ya agregado a la lista"); 
                else
                    try {
                        elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
                    }
                catch(ex) {
                    elSel.add(elOptNew); // IE only
                }
                
                
            }
            
            function activarGrupo(){
                var elementos = document.getElementsByName('cambiarGrupo');
                texto = "";
                for (x=0;x<elementos.length;x++){
                    if(elementos[x].value=="<s:property value="grupo"/>"){
                        elementos[x].id="grupoActivo";
                    }
                }
            }
        </script>
    </head>
    <body onload="tamanio();activarGrupo();">

        <div id="menu">
            <div id="sheet1" class="rounded">
                <form class="forms" action="CrearNota" method="POST" id="formularioCrearNota"  novalidate="novalidate">
                    <p>
                        <label  id="DESC" for="descripcion">Description </label><br/>
                        <input id="CAMPO" type="text" name="descripcion" value="" maxlength="160"/><br/>
                    </p>
                    <p>
                        <label id="CAT" for="posicion">Category </label>
                        <br/>
                        <select id="LISTA" name="posicion">
                            <option>To Do</option>
                            <option>To Remember</option>
                            <option>To Study</option>
                        </select><br/>
                    </p>
                    <p>
                        <label id="COLOR" for="color">Colour </label>
                        <br/>
                        <select id="LISTA" name="color">
                            <option>Yellow</option>
                            <option>Orange</option>
                            <option>Pink</option>
                            <option>Green</option>
                        </select>
                    </p><br/>
                    <input id="button" type="submit" value=" Add " />
                </form>
            </div>           

            <div id="sheet2" class="rounded">
                <form class="forms" action="ModificarNota" method="POST" id="formularioModificarNota"  novalidate="novalidate" >
                    <input type="text" name="id" value="" style="display:none;"/>
                    <p>
                        <label id="DESC" for="descripcion">Description </label><br/>
                        <input id="CAMPO" type="text" name="descripcion_modificar" value="" maxlength="160"/><br/>
                    </p>
                    <p>
                        <label id="CAT" for="posicion_modificar">Category </label><br/>
                        <select id="LISTA" name="posicion_modificar">
                            <option>To Do</option>
                            <option>To Remember</option>
                            <option>To Study</option>
                        </select><br/>
                    </p>
                    <p>
                        <label id="COLOR" for="color_modificar">Colour </label><br/>
                        <select id="LISTA" name="color_modificar">
                            <option>Yellow</option>
                            <option>Orange</option>
                            <option>Pink</option>
                            <option>Green</option>
                        </select>
                    </p><br/>
                    <input id="button" type="submit" value=" Modify " />
                </form>
            </div>

            <div id="sheet3" class="rounded">
                <form class="forms" action="CrearGrupo" method="POST" id="formularioGrupo"  novalidate="novalidate">
                    <p>
                        <label  id="DESC1" for="nombre">Name </label><br/>
                        <input id="CAMPO" type="text" name="nombre" value="" maxlength="160"/><br/>
                    </p>
                    <p>
                        <label id="CAT1" for="usuarios">Users </label><br/>
                        <select id="LISTA1" name="usuarios">
                            <s:iterator value="%{listaUsuarios}">
                                <option><s:property value="usuario"/></option>
                            </s:iterator>                             
                        </select><br/>
                    </p>
                    <p>
                        <input type="button"  id="button1" value="Add User" onclick="appendOptionLast(count2++);" />
                        <br />

                        <select id="LISTA_USERS" name="Usuarios_grupo" size="10" multiple="multiple">
                            <input type="button"  id="button1" value="Remove User" onclick="removeOptionSelected();" />

                        </select>
                        <br />
                    </p>
                    <input id="button" type="submit" value=" Add " onclick="selectAll();"/>
                </form>
            </div>

        </div>

        <div id="principal">
            <div id="header"></div>
            <div id="content">
                <div id="toDo">
                    <br>
                    <s:iterator value="%{listaNotasToDo}">
                        <div id="<s:property value="color"/>">
                            <div id="contenido<s:property value="color"/>">
                                <a href="" rel="#sheet2" class="form2" ><input type="button" value="" name="Modificar" id="modificar" onclick="modificar('<s:property value="id"/>','<s:property value="nota"/>','<s:property value="categoria"/>','<s:property value="color"/>');"/></a>
                                    <s:form action="eliminarNota" method="post">
                                    <input type="text" name="notaId" value="<s:property value="id"/>" style="display:none;"/>
                                    <s:submit value="" id="eliminar"/>                    
                                </s:form>
                                <p>    
                                    <s:property value="nota"/>
                                </p>
                            </div>
                        </div>
                    </s:iterator> 

                </div>
                <div id="toRemember">
                    <br>
                    <s:iterator value="%{listaNotasToRemember}">
                        <div id="<s:property value="color"/>">
                            <div id="contenido<s:property value="color"/>">
                                <a href="" rel="#sheet2" class="form2"><input type="button" value="" name="Modificar" id="modificar" onclick="modificar('<s:property value="id"/>','<s:property value="nota"/>','<s:property value="categoria"/>','<s:property value="color"/>');"/></a><br>
                                    <s:form action="eliminarNota" method="post">
                                    <input type="text" name="notaId" value="<s:property value="id"/>" style="display:none;"/>
                                    <s:submit value="" id="eliminar"/>                    
                                </s:form>
                                <p>   
                                    <s:property value="nota"/><br/>
                                </p>
                            </div>
                        </div>
                    </s:iterator>
                </div>
                <div id="toStudy">
                    <br>
                    <s:iterator value="%{listaNotasToStudy}">
                        <div id="<s:property value="color"/>">
                            <div id="contenido<s:property value="color"/>">
                                <a href="" rel="#sheet2" class="form2"><input type="button" value="" name="Modificar" id="modificar" onclick="modificar('<s:property value="id"/>','<s:property value="nota"/>','<s:property value="categoria"/>','<s:property value="color"/>');"/></a><br>
                                    <s:form action="eliminarNota" method="post">
                                    <input type="text" name="notaId" value="<s:property value="id"/>" style="display:none;"/>
                                    <s:submit value="" id="eliminar"/>                    
                                </s:form>
                                <p>    
                                    <s:property value="nota"/><br/>
                                </p>
                            </div>
                        </div>
                    </s:iterator>
                </div>
            </div>
            <div id="footer"></div>
            <div id="pizarrones">
                <div id="botones">
                    <div id="agregar">
                        <a href="" rel="#sheet1" id="form1"><input type=image src="imagenes/notas.png" width="74" height="74"/></a>         
                        <a href="" rel="#sheet3" id="form3"><input type=image src="imagenes/grupos_1.png" width="74" height="74"/>  </a>     
                    </div>
                </div>

                <div id="grupostabla">
                    <div id="grupos_header"></div>
                    <div id="grupos_content">
                        <div id="tabla">
                            <table id="misgrupos">
                                <tr>
                                    <td>
                                        <s:form action="mostrarGrupo" method="post" id="nomGrupo" >
                                            <input type="text" name="grupo" value="My Whiteboard" style="display:none;"/>
                                            <input type="submit" name="cambiarGrupo" id="cambiarGrupo" value="My Whiteboard" />                    
                                        </s:form>
                                    </td>
                                    <td></td>
                                </tr>
                                <s:iterator value="%{listaGrupos}">
                                    <tr>
                                        <td>
                                            <s:form action="mostrarGrupo" method="post" id="nomGrupo"> 
                                                <input type="text" name="grupo" value="<s:property value="nombre"/>" style="display:none;"/>
                                                <input type="submit"  name="cambiarGrupo" id="cambiarGrupo" value="<s:property value="nombre"/>" />                    
                                            </s:form>
                                        </td>
                                        <td>
                                            <s:form action="eliminarGrupo" method="post" id="eliminarGrupo">
                                                <input type="text" name="grupoId" value="<s:property value="id"/>" style="display:none;"/>
                                                <s:submit value="" id="eliminarGrupo"/>                    
                                            </s:form>
                                        </td>
                                    </tr>                                    
                                </s:iterator> 
                            </table>
                        </div>
                    </div>
                    <div id="grupos_footer">
                        <s:form action="Salir" method="post" id="BotonLogout" >
                            <input type="submit" name="cambiarGrupo" id="logout" value="       Log out" />                    
                        </s:form>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>